<script lang="ts" setup>
import SuperTable from "@/module/table/superTable.vue";
import {ref} from "vue";
import UserApi from "@/api/user/UserApi.ts";
import {UserBo, UserSearchBo, UserVo} from "@/dto/User/User.ts";
import {Page} from "@/common/Page.ts";
import SuperDialog from "@/module/dialog/superDialog.vue";
import SuperButton from "@/module/button/superButton.vue";
import {deletedMessage} from "@/util/FunctionUtil.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import {CarportSearchBo} from "@/dto/Carport/Carport.ts";

const userApi = ref<UserApi>(new UserApi())
const userVo = ref<UserVo>(new UserVo())
const userBo = ref<UserBo>(new UserBo())
const initTable = ref<Array<UserVo>>([])
const selectionUserVo = ref<Array<UserVo>>([])
const userSearchBo = ref<UserSearchBo>(new UserSearchBo())
const pageConfig = ref(Page.initPage)
const editDialog = ref(false)

async function initTableData(page: Page) {
    userSearchBo.value.page = page.page
    userSearchBo.value.limit = page.pageSize
    let result = await userApi.value.pageAll(userSearchBo.value)
    initTable.value = result.data?.content ?? []
    pageConfig.value = new Page(page.page, page.pageSize, <number>result.data?.totalPages, <number>result.data?.totalElements)
}

function add() {
    userVo.value = new UserVo()
    editDialog.value = true
}

function edit(row: UserVo) {
    userVo.value = {...row}
    editDialog.value = true
}

function deleted(row: UserVo) {
    deletedMessage(async () => {
        userSearchBo.value.id = row.id
        let result = await userApi.value.deleted(userSearchBo.value)
        ElMessage.success("删除成功")
        await initTableData(pageConfig.value)
    })
}

function deletedAll() {
    deletedMessage(async () => {
        let searchBoList = selectionUserVo.value.map(item => {
            let searchBo = new UserSearchBo()
            searchBo.id = item.id
            return searchBo
        })
        let result = await userApi.value.deletedAll(searchBoList)
        ElMessage.success("删除成功")
        await initTableData(pageConfig.value)
    })
}

async function save() {
    let result = await userApi.value.edit(userBo.value.fromVo(userVo.value))
    await initTableData(pageConfig.value)
    editDialog.value = false;
}

async function topUp(row: UserVo) {
    ElMessageBox.prompt("请输入金额","充值",{
        cancelButtonText: '取消',
        confirmButtonText: "充值"
    })
        .then(async (val)=>{
            userBo.value = userBo.value.fromVo(row)
            userBo.value.balance = Number(val.value)
            let result = await userApi.value.topUp(userBo.value)
            ElMessage.success("充值成功")
            await initTableData(pageConfig.value)
        })


}

function selection(val: []) {
    selectionUserVo.value = val as Array<UserVo>
}
</script>

<template>
    <super-table
            :page="pageConfig"
            @init="initTableData"
            :data="initTable"
            :column-list="UserVo.getUserColumn()"
            @selection="selection"
    >
        <template #header-button>
            <super-button title="新增" type="success" @click="add"/>
            <super-button title="删除全部" type="danger" @click="deletedAll"/>
        </template>
        <template #column="{row,column}">
            <template v-if="column.prop == 'sex'">
                <el-tag v-if="row[column.prop]" type="success" effect="dark">
                    男
                </el-tag>
                <el-tag v-else type="danger" effect="dark">
                    女
                </el-tag>
            </template>
        </template>
        <template #controls="{row}">
            <super-button title="编辑" type="success" @click="edit(row)"/>
            <super-button title="充值" type="warning" @click="topUp(row)"/>
            <super-button title="删除" type="danger" @click="deleted(row)"/>
        </template>
    </super-table>

    <super-dialog
            title="添加/编辑"
            width="500"
            v-model="editDialog"
    >
        <template #context>
            <el-form>
                <el-form-item label="姓名">
                    <el-input v-model="userVo.name"/>
                </el-form-item>
                <el-form-item label="账号">
                    <el-input v-model="userVo.account"/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="userVo.password" type="password"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-switch
                            v-model="userVo.sex"
                            size="large"
                            inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            active-text="男"
                            inactive-text="女"
                    />
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="userVo.age"/>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <super-button
                    title="取消"
                    type="info"
                    @click="editDialog = false"
            />
            <super-button
                    title="保存"
                    type="success"
                    @click="save"
            />
        </template>
    </super-dialog>
</template>

<style scoped>

</style>